<template>
    <div id="app">
        <el-container>

            <el-aside width="200px">
                <!--左侧树-->
                <el-tree
                        :data="data"
                        :props="defaultProps"
                        default-expand-all
                        @node-click="handleNodeClick"
                ></el-tree>
            </el-aside>

            <el-main style="height: 480px" >
                <el-button
                        type="primary"
                        size="mini"
                        @click="flush()"
                        icon="el-icon-search"
                        style="margin-right: 150px"
                >刷新
                </el-button
                >

                <el-form ref="form" :model="form" label-width="80px" style="width: 80%">

                    <el-input v-model="form.parentId" type="hidden"></el-input>
                    <el-form-item label="菜单名称">
                        <el-input v-model="form.title"></el-input>
                    </el-form-item>

                    <el-form-item label="父节点">
                        <el-input
                                v-model="form.parentName"
                                @focus="dialogMenuTreeVisible = true"
                        ></el-input>
                    </el-form-item>

                    <el-form-item label="学科备注">
                        <el-input v-model="form.remark"></el-input>
                    </el-form-item>

                    <!--                    <el-form-item label="菜单类型" :label-width="formLabelWidth">-->
                    <!--                        <el-radio v-model="form.parentId" label="0">父学科</el-radio>-->
                    <!--                        <el-radio v-model="form.parentId" label="0">子学科</el-radio>-->
                    <!--&lt;!&ndash;                        <el-radio v-model="form.menuType" label="F">按钮</el-radio>&ndash;&gt;-->
                    <!--                    </el-form-item>-->


                    <el-form-item label="是否有效">
                        <el-radio v-model="form.statusId" label="1">启用</el-radio>
                        <el-radio v-model="form.statusId" label="0">禁用</el-radio>
                        <!--                        <el-radio v-model="form.visible" label="1">禁用</el-radio>-->
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">{{addOrUpdate}}</el-button>
                        <el-button v-if="seen" type="danger" @click="onDelete"
                        >删除
                        </el-button
                        >
                    </el-form-item>
                </el-form>
            </el-main>
        </el-container>


        <el-dialog title="权限树" :visible.sync="dialogMenuTreeVisible">
            <el-tree
                    :data="data"
                    :props="defaultProps"
                    show-checkbox
                    check-strictly="true"
                    ref="parentMenuTree"
                    default-expand-all
            ></el-tree>

            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="checkSelectNode">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                data: [], //树数据
                defaultProps: {
                    children: "children",
                    label: "title",
                },
                form: {statusId: "1", parentName: "根节点", parentId: 0, remark: ''},
                // form: { visible: "0", menuType: "C", parentName: "根节点", parentId: 0 },
                dialogMenuTreeVisible: false,
                addOrUpdate: "添加",
                seen: false,
                formLabelWidth: "120px",
            };
        },

        //初始化
        created: function () {
            this.loadTreeData();
        },


        methods: {
            loadTreeData() {
                var _this = this;
                //初始化数据
                this.$http.get("/subject/queryAllTreeData").then(function (response) {
                    _this.data = response.data.data;
                });
            },


            // 左侧树  节点点击事件
            handleNodeClick(data) {
                this.form = data;
                this.form.id = data.id;
                // this.form.title = data.title;
                this.addOrUpdate = "更新";
                this.seen = true;
                //this.form.parentName=data.
            },

            //提交
            onSubmit() {
                console.log("submit!");
                var url = "";
                if (this.seen) {
                    //更新
                    url = "/subject/edit";
                } else {
                    //添加
                    url = "/subject/add";
                }
                //添加或者更新获取
                var _this = this;
                //判断visible是否为true
                // if(this.form.visible){
                //     this.form.visible=0;
                // }else{
                //     this.form.visible=1;
                // }
                this.$http
                    .put(url, this.form)
                    .then(function (response) {
                        console.log(response);
                        if (response.status == 200) {
                            //提示成功
                            _this.$message({
                                message: "恭喜你，操作成功",
                                type: "success",
                            });
                            //_this.$message.success("恭喜你，添加成功");
                            //重新加载数据
                            _this.form={};
                            _this.form.parentName="根节点";
                            _this.loadTreeData();
                        }
                    })
            },

            //校验选中节点数量
            checkSelectNode() {
                let nodes = this.$refs.parentMenuTree.getCheckedNodes();
                if (nodes.length > 1) {
                    this.$message.error("只能选择一个节点。。。");
                    return;
                }
                //alert("一个节点："+JSON.stringify(nodes)+"名称为："+nodes[0].label);
                this.form.parentName = nodes[0].title;
                this.form.parentId = nodes[0].id;
                //关闭弹框
                this.dialogMenuTreeVisible = false;
                //alert("选中节点："+JSON.stringify(this.form));
            },

            //删除  不能直接写delete   根据id查询是否含有子节点
            onDelete() {
                var _this = this;
                this.$http
                    .post("/subject/queryByPage", {
                        pageNo: 1,
                        pageSize: 10,
                        data: {
                            parentId: this.form.id,
                        },
                    })
                    .then(function (response) {
                        if (response.data.code == 200) {
                            if (response.data.data.total > 0) {
                                _this.$message.error("该节点下有子节点，不能删除。。。");
                            } else {
                                _this
                                    .$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
                                        confirmButtonText: "确定",
                                        cancelButtonText: "取消",
                                        type: "warning",
                                    })
                                    .then(() => {
                                        _this.$http
                                            .delete("/subject/deleteById?id=" + _this.form.id)
                                            .then(function (response) {
                                                console.log(response);
                                                if (response.data.code == 200) {
                                                    //提示成功
                                                    _this.$message({
                                                        type: "success",
                                                        message: "删除成功!",
                                                    });
                                                    //重新加载数据
                                                    _this.form={};
                                                    _this.form.parentName="根节点";
                                                    _this.loadTreeData();
                                                }
                                            })
                                    })
                                    .catch(() => {
                                        _this.$message({
                                            type: "info",
                                            message: "已取消删除",
                                        });
                                    });
                            }
                        }
                    })
                //console.log("要删除的菜单ID"+this.form.id);
                //   if(this.form.menuType=='M'){
                //       _this.$message.error("该节点下有子节点，不能删除。。。");
                //       return; //让程序不继续
                //   }
            },
            //刷新
            flush() {
                //刷新当前页
                this.form={};
                this.form.parentName="根节点";
                this.loadTreeData();
            },
        },
    };
</script>
<style>
</style>